/**
 * @description: tab的头部组件
 * @author: Daniel
 * @update: 2022/1/10
 */
import React, { memo } from 'react'
import FastRewindIcon from '@material-ui/icons/FastRewind'
import FastForwardIcon from '@material-ui/icons/FastForward'
import HighlightOffIcon from '@material-ui/icons/HighlightOff'
import SyncIcon from '@material-ui/icons/Sync'
import styles from './styles.module.less'
import { makeStyles, createStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) =>
  createStyles({
    contentTabsListIcon: {
      marginLeft: '5px',
      cursor: 'pointer',
      width: theme.spacing(2),
      height: theme.spacing(2),
    },
    icon: {
      width: theme.spacing(3),
      height: theme.spacing(3),
    },
  })
)

const HeaderTabs = memo(() => {
  const classes = useStyles()
  const datas = [
    { id: 13, name: '首页' },
    { id: 23, name: '用户管理' },
  ]
  return (
    <div className={styles.content_tabs}>
      <div className={styles.content_tabs_left}>
        <FastRewindIcon className={classes.icon} />
      </div>
      <div className={styles.content_tabs_list}>
        {datas.map((v) => {
          return (
            <div
              className={v.id === 2 ? styles.content_tabs_list_item_action : styles.content_tabs_list_item}
              key={v.id}
            >
              {v.name}
              {v.id === 2 ? <HighlightOffIcon className={classes.contentTabsListIcon} /> : null}
            </div>
          )
        })}
      </div>
      <div className={styles.content_tabs_right}>
        <FastForwardIcon className={classes.icon} />
      </div>
      <div className={styles.content_tabs_sync}>
        <SyncIcon className={classes.contentTabsListIcon} />
        刷新
      </div>
    </div>
  )
})

export default HeaderTabs
